<html>

<head>
    <meta charset="utf-8"/>
    <title></title>
    <meta content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width" name="viewport"/>
    <style type="text/css">
        body,
        html,
        #container {
            height: 100%;
            margin: 0px;
        }

        .amap-marker-label {
            font-size: 13px;
            border: 1px solid orange;
            background: #fff;
            border-radius: 5px;
            color: #690441;
        }

        #ctrlBox {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 99999;
            line-height: 200%;
            font-size: 13px;
            background: rgba(0, 0, 0, 0.7);
            color: #FFEB3B;
            padding: 3px 10px;
            border-radius: 5px;
        }

        #themesList {
            background: rgba(0, 0, 0, 0);
            color: white;
            border: 0px;
            outline: none;
            padding: 5px;
            font-size: 1rem;
        }

        #themeslist option {
            background-color: #3e4532;
            color: white;
            border: 0px;
            font-size: 1rem;
        }

        .amap-ui-smp-ifwn-content-body {
            border-radius: 8px !important;
        }

        .window_body {
            color: #666;
            list-style: none;
            font-size: 1rem;
            padding: 0.3rem 1.3rem 0.3rem 1rem;
            margin: 0px;
        }

        .amap-ui-smp-ifwn-info-title {
            border: 0px !important;
        }
    </style>

    <head>
        <meta charset="utf-8"/>
        <title></title>
        <meta content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width" name="viewport"/>
        <style type="text/css">
            body,
            html,
            #container {
                height: 100%;
                margin: 0px;
            }

            .amap-marker-label {
                font-size: 13px;
                border: 1px solid orange;
                background: #fff;
                border-radius: 5px;
                color: #690441;
            }

            #ctrlBox {
                position: absolute;
                top: 10px;
                left: 10px;
                z-index: 99999;
                line-height: 200%;
                font-size: 13px;
                background: rgba(0, 0, 0, 0.7);
                color: #FFEB3B;
                padding: 3px 10px;
                border-radius: 5px;
            }

            #themesList {
                background: rgba(0, 0, 0, 0);
                color: white;
                border: 0px;
                outline: none;
                padding: 5px;
                font-size: 1rem;
            }

            #themeslist option {
                background-color: #3e4532;
                color: white;
                border: 0px;
                font-size: 1rem;
            }

            .amap-ui-smp-ifwn-content-body {
                border-radius: 8px !important;
            }

            .window_body {
                color: #666;
                list-style: none;
                font-size: 1rem;
                padding: 0.3rem 1.3rem 0.3rem 1rem;
                margin: 0px;
            }

            .amap-ui-smp-ifwn-info-title {
                border: 0px !important;
            }
        </style>
    </head>

<body>
<div id="container" tabindex="0"></div>

<div id="ctrlBox">
    <select id="themesList">
        <option value="12017112801">12017112801</option>
        <option value="12017112802">12017112802</option>
        <option value="12017112803">12017112803</option>
        <option value="12017112804">12017112804</option>
    </select>
</div>


</body>
<script src="./js/jquery.min.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.2&key=f1edd598183c970e84c7c513c49ab036"></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

<script type="text/javascript">
    var map = null;
    var parameter = new my_map();

    //初始化
    function init() {
        map = new AMap.Map('container', {
            pitch: 75,
            zoom: 17,
            expandZoomRange: true,
            zooms: [3, 20],
            center: [85.3673611, 27.67425]
        });
    }

    init()

    AMapUI.setDomLibrary($);
    AMapUI.loadUI(['overlay/SimpleMarker', 'overlay/SimpleInfoWindow'], function (SimpleMarker, SimpleInfoWindow) {

        var SimpleInfoWindow = new SimpleInfoWindow({
            infoTitle: '',
            infoBody: '<ul class=window_body>' +
            '<li>通信时间:<span><%- updatedTime %><span></li>' +
            '<li>定位时间:<span><%- locationTime %><span></li>' +
            '<li>东经:<span><%- longitude %><span></li>' +
            '<li>北纬:<span><%- latitude %><span></li>' +
            '</ul>',
            infoTplData: { //模板数据
                longitude: '',
                latitude: '',
                locationTime: '',
                updatedTime: ''
            },
            offset: new AMap.Pixel(15, -31) //基点指向marker的头部位置
        });

        initData();
        setInterval(function () {
            update();
        }, 8000)

        //点击事件
        function markerClick(e) {
            //console.log(parameter.get(e.target.opts.label.content));
            SimpleInfoWindow.setInfoTplData({
                longitude: formatDegree(parameter.get(e.target.opts.label.content).position[0]),
                latitude: formatDegree(parameter.get(e.target.opts.label.content).position[1]),
                locationTime: parameter.get(e.target.opts.label.content).locationTime,
                updatedTime: parameter.get(e.target.opts.label.content).updatedTime,
            })
            SimpleInfoWindow.open(map, e.target.getPosition());
        }

    
        //初始化数据
        function initData() {
            $.ajax({
                url: 'http://bdwise.com:30/jdcjk/getTerminal.do?terminalID=395651',
                method: "get",
                success: function (res) {
                    console.log(res);
         /*            if (res.status == 'OK') {
                        for (var i = 0; i < res.result.length; i++) {
                            parameter.put(
                                res.result[i].terminalId, {
                                    ico: './img/' + (i + 1) + '.png',
                                    position: [res.result[i].longitude, res.result[i].latitude],
                                    updatedTime: res.result[i].updatedTime,
                                    locationTime: res.result[i].locationTime,
                                    terminalId: res.result[i].terminalId,
                                    marker: new SimpleMarker({ //创建SimpleMarker实例
                                        iconStyle: {
                                            src: './img/' + (i + 1) + '.png',
                                            style: {
                                                width: '50px',
                                                height: '50px'
                                            }
                                        },
                                        label: {
                                            content: res.result[i].terminalId,
                                            offset: new AMap.Pixel(-20, 50)
                                        },
                                        map: map,
                                        position: [res.result[i].longitude, res.result[
                                            i].latitude]
                                    }).on('click', markerClick)
                                }
                            )
                        }
                        map.setFitView(); //自适应所有设备
                        setCenter();
                    } */
                }
            });
        }

        //更新数据
        function update() {
            $.ajax({
                url: 'http://bdwise.com:30/jdcjk/getTerminalsByUserAccount.do?account=13810858252&password=25d55ad283aa400af464c76d713c07ad',
                method: "get",
                success: function (res) {
                    if (res.status == 'OK') {
                        for (var i = 0; i < res.result.length; i++) {
                            parameter.get(res.result[i].terminalId).position = [res.result[i].longitude,
                                res.result[i].latitude
                            ];
                            parameter.get(res.result[i].terminalId).updatedTime = res.result[i].updatedTime;
                            parameter.get(res.result[i].terminalId).locationTime = res.result[i].locationTime;
                            //parameter.get(res.result[i].terminalId).position=[res.result[i].longitude, parameter.get(res.result[i].terminalId).position[1]+0.0001];

                        }
                        //更新地图上标记物的数据信息
                        parameter.each(function (key, value) {
                            //console.log(value.position)
                            value.marker.setPosition(value.position);

                        });
                    }
                }
            })
        }

    })

    ///<summary>将度转换成为度分秒</summary>
    function formatDegree(value) {
        value = Math.abs(value);
        var v1 = Math.floor(value); //度
        var v2 = Math.floor((value - v1) * 60); //分
        var v3 = Math.round((value - v1) * 3600 % 60); //秒
        return v1 + '°' + v2 + '\'' + v3 + '"';
    }
</script>

</html>